<template>
  <div
    class="contextmenu fixed z-30 w-[120px]"
    v-if="visible"
    ref="elRef"
    :style="{ left: `${props.x}px`, top: `${props.y}px` }"
  >
    <a-card :body-style="{ padding: '0 ' }">
      <a-menu>
        <a-menu-item v-for="item in menus" @click="onClick(item)">
          {{ item.title }}
        </a-menu-item>
      </a-menu>
    </a-card>
  </div>
</template>

<script setup lang="ts">
const elRef = ref();

const props = defineProps<{
  menus?: any[];
  x: number;
  y: number;
}>();
const visible = defineModel<boolean>("visible");

const mousedown = (e: MouseEvent) => {
  const target = e.target as HTMLElement;
  if (!target.closest("[data-contextmenu]")) return;
  visible.value = true;
};
onMounted(() => {
  document.addEventListener("contextmenu", mousedown);
});
const onClick = (e: any) => {
  e.onClick(e);
  visible.value = false;
};
onClickOutside(elRef, () => (visible.value = false));
</script>

<style lang="scss" scoped></style>
